<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box{
        height: 2rem;
        width: 16rem;
        background-color: red;
    }
</style>
<body>
   <div id="box"></div>
</body>
<script>
    (function(win,doc){
        change()
        function change(){
            doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+"px";
            console.log("1rem="+doc.documentElement.clientWidth*20/320+"px");
        }
        //窗口大小改变事件
        win.addEventListener("resize",change,false)
        //横竖屏事件
        win.addEventListener("orientationchange",change,false)
    })(window,document)
</script>
</html>